import React, {useState} from 'react'
import {connect} from 'react-redux'

const Create = (props) => {
  const {dispatch} = props;
  const [val, setVal] = useState('');
  return (
    <div id="create-todo">
      <input 
        id="new-todo" 
        placeholder="What needs to be done?" 
        autoComplete="off"
        type="text"
        value={val}
        onChange={({target})=>{
          setVal(target.value)
        }}
        onKeyDown={
          (e) => {
            if(e.keyCode == 13){
              let v = val.trim();
              if(v){
                dispatch({
                  type: 'ADD_TODO',
                  v
                })
              }
              setVal('')
            }
          }
        }
      />
    </div>
  )
}

export default connect((state, props) => {
  return{
    ...props,
    data: state.data
  }
})(Create);
